<template>
  <div class="wo-ticket">
    <div class="wo-item wo-left"></div>
    <div class="wo-item wo-middle" @click="$emit(clickEvent)">
      <div class="wo-name">{{ticketData.ticket||ticketData.name}}</div>
      <div class="wo-label">
        <i class="wo-icon"><img class="wo-icon-image" src="../assets/image/icon-heart.png" alt="icon" /></i>
        <span>{{ticketData.tips}}</span>
        <i class="wo-icon"><img class="wo-icon-image" src="../assets/image/icon-heart.png" alt="icon" /></i>
      </div>
    </div>
    <div class="wo-item wo-right"></div>
  </div>
</template>

<script>
  export default {
    name: 'Ticket',
    props: {
      clickEvent: '',
      ticketData: {
        type: Object
      }
    },
    data () {
      return {}
    },
    methods: {
    }
  }
</script>

<style lang="scss" scoped>
  .wo-ticket {
    display: flex;
    background-color: lighten($border-color, 5%);
    border-radius: 5px;
    .wo-item {
      flex: 1;
      &.wo-left, &.wo-right {
        flex: 0 1 20%;
        position: relative;
      }
      &.wo-left {
        &:before {
          position: absolute;
          top: 50%;
          left: 0;
          transform: translate(-50%, -50%);
          display: block;
          content: '';
          width: unified-unit(10px);
          height: unified-unit(10px);
          background-color: #fff;
          border-radius: 50%;
        }
        &:after {
          display: block;
          content: '';
          height: 100%;
          border-right: 1px dashed darken($border-color, 10%);
        }
      }
      &.wo-middle {
        padding: unified-unit(10px);
        text-align: center;
        .wo-name {
          display: block;
          height: unified-unit(30px);
          line-height: unified-unit(30px);
          font-size: unified-unit(18px);
          font-weight: bold;
        }
        .wo-label {
          display: flex;
          .wo-icon {
            flex: 0 0 unified-unit(20px);
            width: unified-unit(20px);
            display: inline-block;
          }
          span {
            flex: 1;
            display: block;
            height: unified-unit(20px);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: 12px;
          }
        }
      }
      &.wo-right {
        &:before {
          display: block;
          content: '';
          height: 100%;
          border-left: 1px dashed darken($border-color, 10%);
        }
        &:after {
          position: absolute;
          top: 50%;
          right: 0;
          transform: translate(50%, -50%);
          display: block;
          content: '';
          width: unified-unit(10px);
          height: unified-unit(10px);
          background-color: #fff;
          border-radius: 50%;
        }
      }
    }
  }
</style>